<template>
    <div class="common-layout">
      <el-container>

        <el-header>
            <el-select v-model="state.selected" class="m-2" placeholder="Select" 
            @change="change"
            size="large">
                <el-option v-for="item in state.options" :key="item" :label="item" :value="item" />
            </el-select>

            <el-text> 数量：{{ state.list_data.length }} </el-text>
        </el-header>

        <el-main>
            <el-table :data="state.list_data" height="700" style="width: 100%"
            @sort-change="sortChange"
            :default-sort="state.sort"
            :cell-class-name="tableCellClassName"
             >
                <el-table-column prop="ses" label="日期" sortable width="110" />
                <el-table-column prop="stock" label="股票" width="150">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="wg" label="吾股" sortable width="100"/>
                <el-table-column prop="tag" label="标签" width="130">
                    <template #default="scope">
                        <IndustryTag :tag="scope.row.tag" />
                    </template>
                </el-table-column>
                <el-table-column prop="lp" label="分位点" width="130" sortable />
                <el-table-column prop="incTotalRevenueYearOnYear" label="营业总收入同比增长率(%)" sortable width="100"/>
                <el-table-column prop="incNetProfitToShareholdersYearOnYear" label="归属母公司股东的净利润同比增长率(%)" sortable width="100"/>
            </el-table>
        </el-main>

      </el-container>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { getFinanceStat } from '../service/finance'
import IndustryTag from './IndustryTag.vue';
import ToStockDetail from './ToStockDetail.vue';

        const base = "FinanceData"
        const selectKey = base + "Select"
        const sortPropKey = base + "SortProp"
        const sortOrderKey = base + "SortOrder"

        const state = reactive({
            selected: sessionStorage.getItem(selectKey) || "2024q1",
            list_data : [],
            options: [],
            data: [],
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || 'monthPct' , 
                order: sessionStorage.getItem(sortOrderKey) || 'ascending' 
            }
        })

        const loadData = (selected) => {
            getFinanceStat(selected).then( res => {
                state.data = res.data
                state.options = state.data.dates

                if (!selected) {
                    state.selected = state.options[0]
                } 

                state.list_data = state.data.data
            })
        }

        loadData(state.selected)

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        //单击
        function cellClick(row, column, cell, event) {
        }

        const change = () => {
            sessionStorage.setItem(selectKey, state.selected)
            loadData(state.selected)
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            if ((row.incTotalRevenueYearOnYear < 0) && (column['label'] == '营业总收入同比增长率(%)')) {
                return 'lt0-cell'
            }

            if ((row.incNetProfitToShareholdersYearOnYear < 0) && (column['label'] == '归属母公司股东的净利润同比增长率(%)')) {
                return 'lt0-cell'
            }

            if ((row.lp < 10) && (column.label == '分位点')) {
                return 'lplt10-cell'
            }

            return ''
        }
</script>
<style>
</style>